<template>
  <view class="bagua-tool">
    <view class="bagua-tool-wrapper app-border-color_ex-top">
      <!-- 对象比较工具 -->
      <view v-if="isToolLoaded('baguaCompare')" v-show="currentSetting.type === 'baguaCompare'">
        <bagua-compare ref="baguaCompare" @change="changeHandler"></bagua-compare>
      </view>
      <!-- 时令查看工具 -->
      <view v-if="isToolLoaded('seasonCheck')" v-show="currentSetting.type === 'seasonCheck'">
        <season-check ref="seasonCheck" @change="changeHandler"></season-check>
      </view>
      <!-- 时局外圈神煞 -->
      <view v-if="isToolLoaded('outerGods')" v-show="currentSetting.type === 'outerGods'">
        <outer-gods :type="currentSetting.subType" @change="changeHandler"></outer-gods>
      </view>
      <!-- 移星换斗 -->
      <view v-if="isToolLoaded('moveStar')" v-show="currentSetting.type === 'moveStar'">
        <move-star @change="changeHandler"></move-star>
      </view>
      <!-- 穿太乙 -->
      <view v-if="isToolLoaded('taiyi')" v-show="currentSetting.type === 'taiyi'">
        <dunjia-set-taiyi @change="changeHandler"></dunjia-set-taiyi>
      </view>
      <!-- 山向选局 -->
      <view v-if="isToolLoaded('selectPos')" v-show="currentSetting.type === 'selectPos'">
        <select-pos :angle="currentSetting.srcAngle" :type="currentSetting.subType" @change="changeHandler"></select-pos>
      </view>
      
      
      <!-- 底部工具条 -->
      <view class="bagua-tool-bottom">
        <cm-icon size="32" type="iconfont icon-arrow-lift" @click="toolOffsetHandler(-1)"></cm-icon>
        <view class="bagua-tool-bottom-text" @click="toolSelectionHandler">
          <text class="cm-margin-right-3">{{ currentSetting.name }}</text>
          <cm-icon size="16" type="cuIcon-triangleupfill"></cm-icon>
        </view>
        <cm-icon size="32" type="iconfont icon-arrow-right" @click="toolOffsetHandler(1)"></cm-icon>
      </view>
    </view>
    
    <cm-popup ref="toolsPopup" direction="bottom" height="170px" exist>
      <scroll-view class="bagua-tool-popup-scroller" scroll-y>
        <view class="cm-flex cm-flex-wrap cm-padding-10 cm-text-center">
          <view class="bagua-tool-selection-wrapper" v-for="(item, index) in currentOptions" :key="index"
            @click="selectToolHandler(item, index)">
            <view class="bagua-tool-selection-extra" :class="[ index === currentIndex ? 'selected' : '' ]"></view>
            <view class="bagua-tool-selection-content">
              <cm-icon size="36" cm-class="app-theme-color" :type="toolList[item.key].icon"></cm-icon>
              <view class="cm-text-12 cm-margin-top-5" v-if="item.key === 'none'">无</view> 
              <view class="cm-text-12 cm-margin-top-5" v-else>{{ toolList[item.key].name }}</view>              
            </view>
          </view>
        </view>        
      </scroll-view>
    </cm-popup>
  </view>
</template>

<script src="./baguaTool.js"></script>

<style lang="stylus">
@import './baguaTool.styl'
</style>
